<template>
	<rx-dialog @ok="handleSubmit" @cancel="cancel">
		<rx-layout>
            <template #middle>
                <a-form>
                    <a-form-item :label="i18n('configuration','配置方式')">
                        <a-radio-group v-model:value="formatterMode" @change="init">
                            <a-radio value="template">{{i18n("template","字符串模板")}}</a-radio>
                            <a-radio value="callbackFun">{{i18n("callbackFun","回调函数")}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-form>
                <RxVueMonaco
                    ref="jsMonacoes"
                    :value="formatter"
                    class="monacoEditor"
                    style="height: 100%"
                    :language="language"
                    @change="valueChange"
                >
                    <template #toolbar>
                        <div v-if="formatterMode=='callbackFun'">
                            <a-button style="margin-left: 8px" @click="insertToLargeNum">{{i18n("toLargeNum","大数转万/亿")}}</a-button>
                            <a-button style="margin-left: 8px" @click="insertToPercentage">{{i18n("toPercentage","小数转百分比")}}</a-button>
                        </div>
                    </template>
                </RxVueMonaco>
            </template>
		</rx-layout>
	</rx-dialog>
</template>

<script>
import {Util,RxLayout,RxDialog,RxVueMonaco} from "@lowcode/jpaas-base-lib";

export default {
	name: "formatter-dialog",
	props:["axisConfig","defaultFormatter","show","type"],
	components:{
		RxLayout,
		RxDialog,
        RxVueMonaco
	},
	data() {
		return {
			formatterMode:"template",
			formatter:"",
            language:"html"
		}
	},
	created() {
		if(this.show){
			this.formatter=this.axisConfig[this.type];
			this.formatterMode=this.axisConfig[this.type+'Mode'];
		}else if(this.axisConfig && this.axisConfig.formatter){
			this.formatter=this.axisConfig.formatter;
			this.formatterMode=this.axisConfig.formatterMode;
		}else {
			//模板
			if(this.formatterMode=="template"){
				this.formatter="";
			}else {
				this.formatter=this.defaultFormatter?this.defaultFormatter:"";
			}
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"dialogLang.formatterDialog",key);
		},
		init(){
			//模板
			if(this.formatterMode=="template"){
				this.language="html";
			}else {
				this.language="javascript";
			}
			this.$refs.jsMonacoes.init('monaco');
		},
		handleSubmit() {
			let data={
				formatterMode:this.formatterMode,
				formatter:this.formatter,
			}
			Util.closeWindow(this, "ok",data);
		},
		cancel() {
			Util.closeWindow(this, "cancel");
		},
		//插入转大写
		insertToLargeNum(){
		    let val="let newValue=0;\n" +
                "if (value >= 100000000) {\n" +
                "\tnewValue=value / 100000000 + \"亿\";\n" +
                "} else if (value >= 10000000) {\n" +
                "\tnewValue=value / 10000000 + \"千万\";\n" +
                "} else if (value >= 1000000) {\n" +
                "\tnewValue=value / 1000000 + \"百万\";\n" +
                "}else if (value >= 10000) {\n" +
                "\tnewValue=value / 10000 + \"万\";\n" +
                "} else if (value >= 1000) {\n" +
                "\tnewValue=value / 1000 + \"千\";\n" +
                "} else {\n" +
                "\tnewValue=value;\n" +
                "}\n" +
                "return newValue;"
			this.$refs.jsMonacoes.setValue(val);
		    this.valueChange(val);
		},
		//插入转百分比
		insertToPercentage(){
		    let val = "return (value*100).toFixed(2)+'%';";
			this.$refs.jsMonacoes.setValue(val);
            this.valueChange(val);
		},
        valueChange(value){
            this.formatter=value;
        }
	},
	watch: {}
}
</script>

<style scoped>
</style>
